import React, { Component } from 'react';
class SvgLeft extends Component {


    render() {
        return (
            <div id='leftSvgId' >

                <svg id='svgLeftContain' width="100%" height="675px" >
                    <line x1="50%" y1="0" x2="50%" y2="100%" className='lineLeft' />

                    {[42, 41, 40, 39, 38, 37, 36, 35].map((item, index) => {
                        let ele_px = 15 * 5;
                        let indexPx = index + 1;
                        let h_px = ele_px * indexPx;
                        return (
                            <line key={'left' + index} x1="50%" y1={h_px} x2="60%" y2={h_px} className='lineLeft' />

                        )
                    })}

                    {[42, 41, 40, 39, 38, 37, 36, 35].map((item, index) => {
                        let ele_px = 15 * 5;
                        let indexPx = index + 1;
                        let h_px = ele_px * indexPx + 3;
                        return (
                            <text key={'left1' + index} x="63%" y={h_px} value={item}  >{item + '℃'}</text>

                        )
                    })}

                </svg>
            </div>
        );
    }
}

export default SvgLeft;